<template>
  <div class="body">
    <div class="login-box">
      <p class="title">系统登陆</p>
      <el-input
        prefix-icon="el-icon-user-solid"
        v-model="acc"
        class="input"
        clearable
      >
      </el-input>
      <el-input
        class="input"
        prefix-icon="el-icon-lock"
        v-model="pwd"
        show-password
      ></el-input>
      <p v-show="error" style="color: red">
        <i class="el-icon-close"></i> 您的用户名或密码错误
      </p>

      <el-button
        style="margin-top: 10px; width: 300px"
        @click="clickLogin"
        class="login"
        type="primary"
        >登录</el-button
      >

      <!-- 防抖---验证码 -->
      <slide-verify
        style="margin-top: 10px"
        ref="myVerify"
        v-show="verify"
        :l="42"
        :r="10"
        :w="300"
        :h="155"
        slider-text="向右滑动"
        @success="onSuccess"
      ></slide-verify>
    </div>

    <router-link to="./Home.vue"></router-link>
  </div>
</template>

<script>
import { loginApi } from "../apis/users";
export default {
  data() {
    return {
      verify: false, //是否显示验证码
      acc: "",
      pwd: "",
      error: false, //提示错误
    };
  },
  methods: {
    clickLogin() {
      this.verify = true;
    },

    // 防抖---验证码
    onSuccess() {
      loginApi({
        account: this.acc,
        password: this.pwd,
      }).then((res) => {
        this.verify = false;
        // console.log(res);
        if (res.data.code === 1) {
          this.error = true;
          this.$refs.myVerify.reset();
        } else {
          this.$router.push("/home/main");

          localStorage.id = res.data.id; //保存id
          localStorage.token = res.data.token; //保存token
          localStorage.acc = this.acc; //保存用户名
          localStorage.role = res.data.role; //保存权限

          //成功提示信息
          this.$message({
            showClose: true,
            message: "恭喜你,登陆成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: #fedcd2;
  background-image: url("../assets/imgs/login-bg1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-position: 15%;

  .login-box {
    width: 340px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 7%;

    .title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
    }
    .input {
      margin-bottom: 15px;
    }
    .login {
      width: 340px;
    }
  }
}
</style>